import { ThemeProvider, createTheme, CssBaseline } from '@mui/material'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import ChatRoom from './components/ChatRoom'
import LoginPage from './components/LoginPage'
import './App.css'
import './components/components.css'

const theme = createTheme({
  palette: {
    primary: {
      main: '#7ed957',
      light: '#a1e759',
      dark: '#5cb82d',
    },
    secondary: {
      main: '#4a9af5',
      light: '#6fb2ff',
      dark: '#2c7dd1',
    },
    background: {
      default: '#f5f7fa',
      paper: '#ffffff',
    },
    text: {
      primary: '#333333',
      secondary: '#666666',
    },
    error: {
      main: '#ff6b6b',
    },
    warning: {
      main: '#feca57',
    },
    info: {
      main: '#54a0ff',
    },
    success: {
      main: '#7ed957',
    },
  },
  typography: {
    fontFamily: '"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif',
    fontSize: 14,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    fontWeightBold: 600,
  },
  shape: {
    borderRadius: 8,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          borderRadius: 8,
          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
          transition: 'all 0.2s ease',
          '&:hover': {
            transform: 'translateY(-2px)',
            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)',
          },
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          boxShadow: '0 2px 10px rgba(0, 0, 0, 0.08)',
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: 8,
            transition: 'all 0.3s ease',
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: '#7ed957',
              boxShadow: '0 0 0 3px rgba(126, 217, 87, 0.2)',
            },
          },
        },
      },
    },
  },
});

import { UserProvider } from './contexts/UserContext';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <UserProvider>
        <Router>
          <Routes>
            <Route path="/" element={<Navigate to="/login" replace />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/chat" element={<ChatRoom />} />
          </Routes>
        </Router>
      </UserProvider>
    </ThemeProvider>
  )
}

export default App
